<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>Dashboard - Ace Admin</title>

	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />

	<!-- page specific plugin styles -->

	<!-- text fonts -->
	<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />

	<!-- ace styles -->
	<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

	<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
	<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
	<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

	<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

	<!-- inline styles related to this page -->

	<!-- ace settings handler -->
	<script src="assets/js/ace-extra.min.js"></script>

	<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

	<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
</head>

<body class="no-skin">
	<div id="navbar" class="navbar navbar-default          ace-save-state">
		<div class="navbar-container ace-save-state" id="navbar-container">
			<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
				<span class="sr-only">Toggle sidebar</span>

				<span class="icon-bar"></span>

				<span class="icon-bar"></span>

				<span class="icon-bar"></span>
			</button>

			<div class="navbar-header pull-left">
				<a href="index.html" class="navbar-brand">
					<small>
						<i class="fa fa-leaf"></i>
						Ace Admin
					</small>
				</a>
			</div>

			<div class="navbar-buttons navbar-header pull-right" role="navigation">
				<ul class="nav ace-nav">
					<li class="grey dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<i class="ace-icon fa fa-tasks"></i>
							<span class="badge badge-grey">4</span>
						</a>

						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-check"></i>
								4 Tasks to complete
							</li>

							<li class="dropdown-content">
								<ul class="dropdown-menu dropdown-navbar">
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">Software Update</span>
												<span class="pull-right">65%</span>
											</div>

											<div class="progress progress-mini">
												<div style="width:65%" class="progress-bar"></div>
											</div>
										</a>
									</li>

									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">Hardware Upgrade</span>
												<span class="pull-right">35%</span>
											</div>

											<div class="progress progress-mini">
												<div style="width:35%" class="progress-bar progress-bar-danger"></div>
											</div>
										</a>
									</li>

									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">Unit Testing</span>
												<span class="pull-right">15%</span>
											</div>

											<div class="progress progress-mini">
												<div style="width:15%" class="progress-bar progress-bar-warning"></div>
											</div>
										</a>
									</li>

									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">Bug Fixes</span>
												<span class="pull-right">90%</span>
											</div>

											<div class="progress progress-mini progress-striped active">
												<div style="width:90%" class="progress-bar progress-bar-success"></div>
											</div>
										</a>
									</li>
								</ul>
							</li>

							<li class="dropdown-footer">
								<a href="#">
									See tasks with details
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="purple dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<i class="ace-icon fa fa-bell icon-animated-bell"></i>
							<span class="badge badge-important">8</span>
						</a>

						<ul
							class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-exclamation-triangle"></i>
								8 Notifications
							</li>

							<li class="dropdown-content">
								<ul class="dropdown-menu dropdown-navbar navbar-pink">
									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">
													<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
													New Comments
												</span>
												<span class="pull-right badge badge-info">+12</span>
											</div>
										</a>
									</li>

									<li>
										<a href="#">
											<i class="btn btn-xs btn-primary fa fa-user"></i>
											Bob just signed up as an editor ...
										</a>
									</li>

									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">
													<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
													New Orders
												</span>
												<span class="pull-right badge badge-success">+8</span>
											</div>
										</a>
									</li>

									<li>
										<a href="#">
											<div class="clearfix">
												<span class="pull-left">
													<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
													Followers
												</span>
												<span class="pull-right badge badge-info">+11</span>
											</div>
										</a>
									</li>
								</ul>
							</li>

							<li class="dropdown-footer">
								<a href="#">
									See all notifications
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="green dropdown-modal">
						<a data-toggle="dropdown" class="dropdown-toggle" href="#">
							<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
							<span class="badge badge-success">5</span>
						</a>

						<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
							<li class="dropdown-header">
								<i class="ace-icon fa fa-envelope-o"></i>
								5 Messages
							</li>

							<li class="dropdown-content">
								<ul class="dropdown-menu dropdown-navbar">
									<li>
										<a href="#" class="clearfix">
											<img src="assets/images/avatars/avatar.png" class="msg-photo"
												alt="Alex's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Alex:</span>
													Ciao sociis natoque penatibus et auctor ...
												</span>

												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>a moment ago</span>
												</span>
											</span>
										</a>
									</li>

									<li>
										<a href="#" class="clearfix">
											<img src="assets/images/avatars/avatar3.png" class="msg-photo"
												alt="Susan's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Susan:</span>
													Vestibulum id ligula porta felis euismod ...
												</span>

												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>20 minutes ago</span>
												</span>
											</span>
										</a>
									</li>

									<li>
										<a href="#" class="clearfix">
											<img src="assets/images/avatars/avatar4.png" class="msg-photo"
												alt="Bob's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Bob:</span>
													Nullam quis risus eget urna mollis ornare ...
												</span>

												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>3:15 pm</span>
												</span>
											</span>
										</a>
									</li>

									<li>
										<a href="#" class="clearfix">
											<img src="assets/images/avatars/avatar2.png" class="msg-photo"
												alt="Kate's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Kate:</span>
													Ciao sociis natoque eget urna mollis ornare ...
												</span>

												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>1:33 pm</span>
												</span>
											</span>
										</a>
									</li>

									<li>
										<a href="#" class="clearfix">
											<img src="assets/images/avatars/avatar5.png" class="msg-photo"
												alt="Fred's Avatar" />
											<span class="msg-body">
												<span class="msg-title">
													<span class="blue">Fred:</span>
													Vestibulum id penatibus et auctor ...
												</span>

												<span class="msg-time">
													<i class="ace-icon fa fa-clock-o"></i>
													<span>10:09 am</span>
												</span>
											</span>
										</a>
									</li>
								</ul>
							</li>

							<li class="dropdown-footer">
								<a href="inbox.html">
									See all messages
									<i class="ace-icon fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="light-blue dropdown-modal">
						<a data-toggle="dropdown" href="#" class="dropdown-toggle">
							<img class="nav-user-photo" src="assets/images/avatars/user.jpg" alt="Jason's Photo" />
							<span class="user-info">
								<small>Welcome,</small>
								Jason
							</span>

							<i class="ace-icon fa fa-caret-down"></i>
						</a>

						<ul
							class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
							<li>
								<a href="#">
									<i class="ace-icon fa fa-cog"></i>
									Settings
								</a>
							</li>

							<li>
								<a href="profile.html">
									<i class="ace-icon fa fa-user"></i>
									Profile
								</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">
									<i class="ace-icon fa fa-power-off"></i>
									Logout
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div><!-- /.navbar-container -->
	</div>

	<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
			try { ace.settings.loadState('main-container') } catch (e) { }
		</script>

		<div id="sidebar" class="sidebar                  responsive                    ace-save-state">
			<script type="text/javascript">
				try { ace.settings.loadState('sidebar') } catch (e) { }
			</script>

			<div class="sidebar-shortcuts" id="sidebar-shortcuts">
				<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
					<button class="btn btn-success">
						<i class="ace-icon fa fa-signal"></i>
					</button>

					<button class="btn btn-info">
						<i class="ace-icon fa fa-pencil"></i>
					</button>

					<button class="btn btn-warning">
						<i class="ace-icon fa fa-users"></i>
					</button>

					<button class="btn btn-danger">
						<i class="ace-icon fa fa-cogs"></i>
					</button>
				</div>

				<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
					<span class="btn btn-success"></span>

					<span class="btn btn-info"></span>

					<span class="btn btn-warning"></span>

					<span class="btn btn-danger"></span>
				</div>
			</div><!-- /.sidebar-shortcuts -->

			<ul class="nav nav-list">
				<li class="active">
					<a href="index.html">
						<i class="menu-icon fa fa-tachometer"></i>
						<span class="menu-text"> Dashboard </span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="#" class="dropdown-toggle">
						<i class="menu-icon fa fa-desktop"></i>
						<span class="menu-text">
							UI &amp; Elements
						</span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-caret-right"></i>

								Layouts
								<b class="arrow fa fa-angle-down"></b>
							</a>

							<b class="arrow"></b>

							<ul class="submenu">
								<li class="">
									<a href="top-menu.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Top Menu
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="two-menu-1.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Two Menus 1
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="two-menu-2.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Two Menus 2
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="mobile-menu-1.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Default Mobile Menu
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="mobile-menu-2.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Mobile Menu 2
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="mobile-menu-3.html">
										<i class="menu-icon fa fa-caret-right"></i>
										Mobile Menu 3
									</a>

									<b class="arrow"></b>
								</li>
							</ul>
						</li>

						<li class="">
							<a href="typography.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Typography
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="elements.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Elements
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="buttons.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Buttons &amp; Icons
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="content-slider.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Content Sliders
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="treeview.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Treeview
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="jquery-ui.html">
								<i class="menu-icon fa fa-caret-right"></i>
								jQuery UI
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="nestable-list.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Nestable Lists
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="#" class="dropdown-toggle">
								<i class="menu-icon fa fa-caret-right"></i>

								Three Level Menu
								<b class="arrow fa fa-angle-down"></b>
							</a>

							<b class="arrow"></b>

							<ul class="submenu">
								<li class="">
									<a href="#">
										<i class="menu-icon fa fa-leaf green"></i>
										Item #1
									</a>

									<b class="arrow"></b>
								</li>

								<li class="">
									<a href="#" class="dropdown-toggle">
										<i class="menu-icon fa fa-pencil orange"></i>

										4th level
										<b class="arrow fa fa-angle-down"></b>
									</a>

									<b class="arrow"></b>

									<ul class="submenu">
										<li class="">
											<a href="#">
												<i class="menu-icon fa fa-plus purple"></i>
												Add Product
											</a>

											<b class="arrow"></b>
										</li>

										<li class="">
											<a href="#">
												<i class="menu-icon fa fa-eye pink"></i>
												View Products
											</a>

											<b class="arrow"></b>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="#" class="dropdown-toggle">
						<i class="menu-icon fa fa-list"></i>
						<span class="menu-text"> Tables </span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="tables.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Simple &amp; Dynamic
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="jqgrid.html">
								<i class="menu-icon fa fa-caret-right"></i>
								jqGrid plugin
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="#" class="dropdown-toggle">
						<i class="menu-icon fa fa-pencil-square-o"></i>
						<span class="menu-text"> Forms </span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="form-elements.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Form Elements
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="form-elements-2.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Form Elements 2
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="form-wizard.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Wizard &amp; Validation
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="wysiwyg.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Wysiwyg &amp; Markdown
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="dropzone.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Dropzone File Upload
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="widgets.html">
						<i class="menu-icon fa fa-list-alt"></i>
						<span class="menu-text"> Widgets </span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="calendar.html">
						<i class="menu-icon fa fa-calendar"></i>

						<span class="menu-text">
							Calendar

							<span class="badge badge-transparent tooltip-error" title="2 Important Events">
								<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
							</span>
						</span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="gallery.html">
						<i class="menu-icon fa fa-picture-o"></i>
						<span class="menu-text"> Gallery </span>
					</a>

					<b class="arrow"></b>
				</li>

				<li class="">
					<a href="#" class="dropdown-toggle">
						<i class="menu-icon fa fa-tag"></i>
						<span class="menu-text"> More Pages </span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="profile.html">
								<i class="menu-icon fa fa-caret-right"></i>
								User Profile
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="inbox.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Inbox
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="pricing.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Pricing Tables
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="invoice.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Invoice
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="timeline.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Timeline
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="search.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Search Results
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="email.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Email Templates
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="login.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Login &amp; Register
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>

				<li class="">
					<a href="#" class="dropdown-toggle">
						<i class="menu-icon fa fa-file-o"></i>

						<span class="menu-text">
							Other Pages

							<span class="badge badge-primary">5</span>
						</span>

						<b class="arrow fa fa-angle-down"></b>
					</a>

					<b class="arrow"></b>

					<ul class="submenu">
						<li class="">
							<a href="faq.html">
								<i class="menu-icon fa fa-caret-right"></i>
								FAQ
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="error-404.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Error 404
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="error-500.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Error 500
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="grid.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Grid
							</a>

							<b class="arrow"></b>
						</li>

						<li class="">
							<a href="blank.html">
								<i class="menu-icon fa fa-caret-right"></i>
								Blank Page
							</a>

							<b class="arrow"></b>
						</li>
					</ul>
				</li>
			</ul><!-- /.nav-list -->

			<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
				<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state"
					data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
			</div>
		</div>

		<div class="main-content">
			<div class="main-content-inner">
				<div class="breadcrumbs ace-save-state" id="breadcrumbs">
					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a href="#">Home</a>
						</li>
						<li class="active">Dashboard</li>
					</ul><!-- /.breadcrumb -->

					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input"
									id="nav-search-input" autocomplete="off" />
								<i class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div><!-- /.nav-search -->
				</div>

				<div class="page-content">
					<div class="ace-settings-container" id="ace-settings-container">
						<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
							<i class="ace-icon fa fa-cog bigger-130"></i>
						</div>

						<div class="ace-settings-box clearfix" id="ace-settings-box">
							<div class="pull-left width-50">
								<div class="ace-settings-item">
									<div class="pull-left">
										<select id="skin-colorpicker" class="hide">
											<option data-skin="no-skin" value="#438EB9">#438EB9</option>
											<option data-skin="skin-1" value="#222A2D">#222A2D</option>
											<option data-skin="skin-2" value="#C6487E">#C6487E</option>
											<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
										</select>
									</div>
									<span>&nbsp; Choose Skin</span>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
										id="ace-settings-navbar" autocomplete="off" />
									<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
										id="ace-settings-sidebar" autocomplete="off" />
									<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
										id="ace-settings-breadcrumbs" autocomplete="off" />
									<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl"
										autocomplete="off" />
									<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2 ace-save-state"
										id="ace-settings-add-container" autocomplete="off" />
									<label class="lbl" for="ace-settings-add-container">
										Inside
										<b>.container</b>
									</label>
								</div>
							</div><!-- /.pull-left -->

							<div class="pull-left width-50">
								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover"
										autocomplete="off" />
									<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact"
										autocomplete="off" />
									<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
								</div>

								<div class="ace-settings-item">
									<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight"
										autocomplete="off" />
									<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
								</div>
							</div><!-- /.pull-left -->
						</div><!-- /.ace-settings-box -->
					</div><!-- /.ace-settings-container -->

					<div class="page-header">
						<h1>
							Dashboard
							<small>
								<i class="ace-icon fa fa-angle-double-right"></i>
								overview &amp; stats
							</small>
						</h1>
					</div><!-- /.page-header -->

					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<div class="alert alert-block alert-success">
								<button type="button" class="close" data-dismiss="alert">
									<i class="ace-icon fa fa-times"></i>
								</button>

								<i class="ace-icon fa fa-check green"></i>

								Welcome to
								<strong class="green">
									Ace
									<small>(v1.4)</small>
								</strong>,
								лёгкий, многофункциональный и простой в использовании шаблон для админки на bootstrap
								3.3.6. Загрузить исходники с <a href="https://github.com/bopoda/ace">github</a> (with
								minified ace js/css files).
							</div>

							<div class="row">
								<div class="space-6"></div>

								<div class="col-sm-7 infobox-container">
									<div class="infobox infobox-green">
										<div class="infobox-icon">
											<i class="ace-icon fa fa-comments"></i>
										</div>

										<div class="infobox-data">
											<span class="infobox-data-number">32</span>
											<div class="infobox-content">comments + 2 reviews</div>
										</div>

										<div class="stat stat-success">8%</div>
									</div>

									<div class="infobox infobox-blue">
										<div class="infobox-icon">
											<i class="ace-icon fa fa-twitter"></i>
										</div>

										<div class="infobox-data">
											<span class="infobox-data-number">11</span>
											<div class="infobox-content">new followers</div>
										</div>

										<div class="badge badge-success">
											+32%
											<i class="ace-icon fa fa-arrow-up"></i>
										</div>
									</div>

									<div class="infobox infobox-pink">
										<div class="infobox-icon">
											<i class="ace-icon fa fa-shopping-cart"></i>
										</div>

										<div class="infobox-data">
											<span class="infobox-data-number">8</span>
											<div class="infobox-content">new orders</div>
										</div>
										<div class="stat stat-important">4%</div>
									</div>

									<div class="infobox infobox-red">
										<div class="infobox-icon">
											<i class="ace-icon fa fa-flask"></i>
										</div>

										<div class="infobox-data">
											<span class="infobox-data-number">7</span>
											<div class="infobox-content">experiments</div>
										</div>
									</div>

									<div class="infobox infobox-orange2">
										<div class="infobox-chart">
											<span class="sparkline"
												data-values="196,128,202,177,154,94,100,170,224"></span>
										</div>

										<div class="infobox-data">
											<span class="infobox-data-number">6,251</span>
											<div class="infobox-content">pageviews</div>
										</div>

										<div class="badge badge-success">
											7.2%
											<i class="ace-icon fa fa-arrow-up"></i>
										</div>
									</div>

									<div class="infobox infobox-blue2">
										<div class="infobox-progress">
											<div class="easy-pie-chart percentage" data-percent="42" data-size="46">
												<span class="percent">42</span>%
											</div>
										</div>

										<div class="infobox-data">
											<span class="infobox-text">traffic used</span>

											<div class="infobox-content">
												<span class="bigger-110">~</span>
												58GB remaining
											</div>
										</div>
									</div>

									<div class="space-6"></div>

									<div class="infobox infobox-green infobox-small infobox-dark">
										<div class="infobox-progress">
											<div class="easy-pie-chart percentage" data-percent="61" data-size="39">
												<span class="percent">61</span>%
											</div>
										</div>

										<div class="infobox-data">
											<div class="infobox-content">Task</div>
											<div class="infobox-content">Completion</div>
										</div>
									</div>

									<div class="infobox infobox-blue infobox-small infobox-dark">
										<div class="infobox-chart">
											<span class="sparkline" data-values="3,4,2,3,4,4,2,2"></span>
										</div>

										<div class="infobox-data">
											<div class="infobox-content">Earnings</div>
											<div class="infobox-content">$32,000</div>
										</div>
									</div>

									<div class="infobox infobox-grey infobox-small infobox-dark">
										<div class="infobox-icon">
											<i class="ace-icon fa fa-download"></i>
										</div>

										<div class="infobox-data">
											<div class="infobox-content">Downloads</div>
											<div class="infobox-content">1,205</div>
										</div>
									</div>
								</div>

								<div class="vspace-12-sm"></div>

								<div class="col-sm-5">
									<div class="widget-box">
										<div class="widget-header widget-header-flat widget-header-small">
											<h5 class="widget-title">
												<i class="ace-icon fa fa-signal"></i>
												Traffic Sources
											</h5>

											<div class="widget-toolbar no-border">
												<div class="inline dropdown-hover">
													<button class="btn btn-minier btn-primary">
														This Week
														<i
															class="ace-icon fa fa-angle-down icon-on-right bigger-110"></i>
													</button>

													<ul
														class="dropdown-menu dropdown-menu-right dropdown-125 dropdown-lighter dropdown-close dropdown-caret">
														<li class="active">
															<a href="#" class="blue">
																<i
																	class="ace-icon fa fa-caret-right bigger-110">&nbsp;</i>
																This Week
															</a>
														</li>

														<li>
															<a href="#">
																<i
																	class="ace-icon fa fa-caret-right bigger-110 invisible">&nbsp;</i>
																Last Week
															</a>
														</li>

														<li>
															<a href="#">
																<i
																	class="ace-icon fa fa-caret-right bigger-110 invisible">&nbsp;</i>
																This Month
															</a>
														</li>

														<li>
															<a href="#">
																<i
																	class="ace-icon fa fa-caret-right bigger-110 invisible">&nbsp;</i>
																Last Month
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>

										<div class="widget-body">
											<div class="widget-main">
												<div id="piechart-placeholder"></div>

												<div class="hr hr8 hr-double"></div>

												<div class="clearfix">
													<div class="grid3">
														<span class="grey">
															<i class="ace-icon fa fa-facebook-square fa-2x blue"></i>
															&nbsp; likes
														</span>
														<h4 class="bigger pull-right">1,255</h4>
													</div>

													<div class="grid3">
														<span class="grey">
															<i class="ace-icon fa fa-twitter-square fa-2x purple"></i>
															&nbsp; tweets
														</span>
														<h4 class="bigger pull-right">941</h4>
													</div>

													<div class="grid3">
														<span class="grey">
															<i class="ace-icon fa fa-pinterest-square fa-2x red"></i>
															&nbsp; pins
														</span>
														<h4 class="bigger pull-right">1,050</h4>
													</div>
												</div>
											</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
									</div><!-- /.widget-box -->
								</div><!-- /.col -->
							</div><!-- /.row -->

							<div class="hr hr32 hr-dotted"></div>

							<div class="row">
								<div class="col-sm-5">
									<div class="widget-box transparent">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-star orange"></i>
												Popular Domains
											</h4>

											<div class="widget-toolbar">
												<a href="#" data-action="collapse">
													<i class="ace-icon fa fa-chevron-up"></i>
												</a>
											</div>
										</div>

										<div class="widget-body">
											<div class="widget-main no-padding">
												<table class="table table-bordered table-striped">
													<thead class="thin-border-bottom">
														<tr>
															<th>
																<i class="ace-icon fa fa-caret-right blue"></i>name
															</th>

															<th>
																<i class="ace-icon fa fa-caret-right blue"></i>price
															</th>

															<th class="hidden-480">
																<i class="ace-icon fa fa-caret-right blue"></i>status
															</th>
														</tr>
													</thead>

													<tbody>
														<tr>
															<td>internet.com</td>

															<td>
																<small>
																	<s class="red">$29.99</s>
																</small>
																<b class="green">$19.99</b>
															</td>

															<td class="hidden-480">
																<span
																	class="label label-info arrowed-right arrowed-in">on
																	sale</span>
															</td>
														</tr>

														<tr>
															<td>online.com</td>

															<td>
																<b class="blue">$16.45</b>
															</td>

															<td class="hidden-480">
																<span
																	class="label label-success arrowed-in arrowed-in-right">approved</span>
															</td>
														</tr>

														<tr>
															<td>newnet.com</td>

															<td>
																<b class="blue">$15.00</b>
															</td>

															<td class="hidden-480">
																<span class="label label-danger arrowed">pending</span>
															</td>
														</tr>

														<tr>
															<td>web.com</td>

															<td>
																<small>
																	<s class="red">$24.99</s>
																</small>
																<b class="green">$19.95</b>
															</td>

															<td class="hidden-480">
																<span class="label arrowed">
																	<s>out of stock</s>
																</span>
															</td>
														</tr>

														<tr>
															<td>domain.com</td>

															<td>
																<b class="blue">$12.00</b>
															</td>

															<td class="hidden-480">
																<span
																	class="label label-warning arrowed arrowed-right">SOLD</span>
															</td>
														</tr>
													</tbody>
												</table>
											</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
									</div><!-- /.widget-box -->
								</div><!-- /.col -->

								<div class="col-sm-7">
									<div class="widget-box transparent">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-signal"></i>
												Sale Stats
											</h4>

											<div class="widget-toolbar">
												<a href="#" data-action="collapse">
													<i class="ace-icon fa fa-chevron-up"></i>
												</a>
											</div>
										</div>

										<div class="widget-body">
											<div class="widget-main padding-4">
												<div id="sales-charts"></div>
											</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
									</div><!-- /.widget-box -->
								</div><!-- /.col -->
							</div><!-- /.row -->

							<div class="hr hr32 hr-dotted"></div>

							<div class="row">
								<div class="col-sm-6">
									<div class="widget-box transparent" id="recent-box">
										<div class="widget-header">
											<h4 class="widget-title lighter smaller">
												<i class="ace-icon fa fa-rss orange"></i>RECENT
											</h4>

											<div class="widget-toolbar no-border">
												<ul class="nav nav-tabs" id="recent-tab">
													<li class="active">
														<a data-toggle="tab" href="#task-tab">Tasks</a>
													</li>

													<li>
														<a data-toggle="tab" href="#member-tab">Members</a>
													</li>

													<li>
														<a data-toggle="tab" href="#comment-tab">Comments</a>
													</li>
												</ul>
											</div>
										</div>

										<div class="widget-body">
											<div class="widget-main padding-4">
												<div class="tab-content padding-8">
													<div id="task-tab" class="tab-pane active">
														<h4 class="smaller lighter green">
															<i class="ace-icon fa fa-list"></i>
															Sortable Lists
														</h4>

														<ul id="tasks" class="item-list">
															<li class="item-orange clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Answering customer
																		questions</span>
																</label>

																<div class="pull-right easy-pie-chart percentage"
																	data-size="30" data-color="#ECCB71"
																	data-percent="42">
																	<span class="percent">42</span>%
																</div>
															</li>

															<li class="item-red clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Fixing bugs</span>
																</label>

																<div class="pull-right action-buttons">
																	<a href="#" class="blue">
																		<i class="ace-icon fa fa-pencil bigger-130"></i>
																	</a>

																	<span class="vbar"></span>

																	<a href="#" class="red">
																		<i
																			class="ace-icon fa fa-trash-o bigger-130"></i>
																	</a>

																	<span class="vbar"></span>

																	<a href="#" class="green">
																		<i class="ace-icon fa fa-flag bigger-130"></i>
																	</a>
																</div>
															</li>

															<li class="item-default clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Adding new features</span>
																</label>

																<div class="pull-right pos-rel dropdown-hover">
																	<button class="btn btn-minier bigger btn-primary">
																		<i
																			class="ace-icon fa fa-cog icon-only bigger-120"></i>
																	</button>

																	<ul
																		class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-caret dropdown-close dropdown-menu-right">
																		<li>
																			<a href="#" class="tooltip-success"
																				data-rel="tooltip"
																				title="Mark&nbsp;as&nbsp;done">
																				<span class="green">
																					<i
																						class="ace-icon fa fa-check bigger-110"></i>
																				</span>
																			</a>
																		</li>

																		<li>
																			<a href="#" class="tooltip-error"
																				data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i
																						class="ace-icon fa fa-trash-o bigger-110"></i>
																				</span>
																			</a>
																		</li>
																	</ul>
																</div>
															</li>

															<li class="item-blue clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Upgrading scripts used in
																		template</span>
																</label>
															</li>

															<li class="item-grey clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Adding new skins</span>
																</label>
															</li>

															<li class="item-green clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Updating server software
																		up</span>
																</label>
															</li>

															<li class="item-pink clearfix">
																<label class="inline">
																	<input type="checkbox" class="ace" />
																	<span class="lbl"> Cleaning up</span>
																</label>
															</li>
														</ul>
													</div>

													<div id="member-tab" class="tab-pane">
														<div class="clearfix">
															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Bob Doe's avatar"
																		src="assets/images/avatars/user.jpg" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Bob Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">20 min</span>
																	</div>

																	<div>
																		<span
																			class="label label-warning label-sm">pending</span>

																		<div class="inline position-relative">
																			<button
																				class="btn btn-minier btn-yellow btn-no-border dropdown-toggle"
																				data-toggle="dropdown"
																				data-position="auto">
																				<i
																					class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
																			</button>

																			<ul
																				class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
																				<li>
																					<a href="#" class="tooltip-success"
																						data-rel="tooltip"
																						title="Approve">
																						<span class="green">
																							<i
																								class="ace-icon fa fa-check bigger-110"></i>
																						</span>
																					</a>
																				</li>

																				<li>
																					<a href="#" class="tooltip-warning"
																						data-rel="tooltip"
																						title="Reject">
																						<span class="orange">
																							<i
																								class="ace-icon fa fa-times bigger-110"></i>
																						</span>
																					</a>
																				</li>

																				<li>
																					<a href="#" class="tooltip-error"
																						data-rel="tooltip"
																						title="Delete">
																						<span class="red">
																							<i
																								class="ace-icon fa fa-trash-o bigger-110"></i>
																						</span>
																					</a>
																				</li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Joe Doe's avatar"
																		src="assets/images/avatars/avatar2.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Joe Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">1 hour</span>
																	</div>

																	<div>
																		<span
																			class="label label-warning label-sm">pending</span>

																		<div class="inline position-relative">
																			<button
																				class="btn btn-minier btn-yellow btn-no-border dropdown-toggle"
																				data-toggle="dropdown"
																				data-position="auto">
																				<i
																					class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
																			</button>

																			<ul
																				class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
																				<li>
																					<a href="#" class="tooltip-success"
																						data-rel="tooltip"
																						title="Approve">
																						<span class="green">
																							<i
																								class="ace-icon fa fa-check bigger-110"></i>
																						</span>
																					</a>
																				</li>

																				<li>
																					<a href="#" class="tooltip-warning"
																						data-rel="tooltip"
																						title="Reject">
																						<span class="orange">
																							<i
																								class="ace-icon fa fa-times bigger-110"></i>
																						</span>
																					</a>
																				</li>

																				<li>
																					<a href="#" class="tooltip-error"
																						data-rel="tooltip"
																						title="Delete">
																						<span class="red">
																							<i
																								class="ace-icon fa fa-trash-o bigger-110"></i>
																						</span>
																					</a>
																				</li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Jim Doe's avatar"
																		src="assets/images/avatars/avatar.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Jim Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">2 hour</span>
																	</div>

																	<div>
																		<span
																			class="label label-warning label-sm">pending</span>

																		<div class="inline position-relative">
																			<button
																				class="btn btn-minier btn-yellow btn-no-border dropdown-toggle"
																				data-toggle="dropdown"
																				data-position="auto">
																				<i
																					class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
																			</button>

																			<ul
																				class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
																				<li>
																					<a href="#" class="tooltip-success"
																						data-rel="tooltip"
																						title="Approve">
																						<span class="green">
																							<i
																								class="ace-icon fa fa-check bigger-110"></i>
																						</span>
																					</a>
																				</li>

																				<li>
																					<a href="#" class="tooltip-warning"
																						data-rel="tooltip"
																						title="Reject">
																						<span class="orange">
																							<i
																								class="ace-icon fa fa-times bigger-110"></i>
																						</span>
																					</a>
																				</li>

																				<li>
																					<a href="#" class="tooltip-error"
																						data-rel="tooltip"
																						title="Delete">
																						<span class="red">
																							<i
																								class="ace-icon fa fa-trash-o bigger-110"></i>
																						</span>
																					</a>
																				</li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Alex Doe's avatar"
																		src="assets/images/avatars/avatar5.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Alex Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">3 hour</span>
																	</div>

																	<div>
																		<span
																			class="label label-danger label-sm">blocked</span>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Bob Doe's avatar"
																		src="assets/images/avatars/avatar2.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Bob Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">6 hour</span>
																	</div>

																	<div>
																		<span
																			class="label label-success label-sm arrowed-in">approved</span>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Susan's avatar"
																		src="assets/images/avatars/avatar3.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Susan</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">yesterday</span>
																	</div>

																	<div>
																		<span
																			class="label label-success label-sm arrowed-in">approved</span>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Phil Doe's avatar"
																		src="assets/images/avatars/avatar4.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Phil Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">2 days ago</span>
																	</div>

																	<div>
																		<span
																			class="label label-info label-sm arrowed-in arrowed-in-right">online</span>
																	</div>
																</div>
															</div>

															<div class="itemdiv memberdiv">
																<div class="user">
																	<img alt="Alexa Doe's avatar"
																		src="assets/images/avatars/avatar1.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Alexa Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">3 days ago</span>
																	</div>

																	<div>
																		<span
																			class="label label-success label-sm arrowed-in">approved</span>
																	</div>
																</div>
															</div>
														</div>

														<div class="space-4"></div>

														<div class="center">
															<i class="ace-icon fa fa-users fa-2x green middle"></i>

															&nbsp;
															<a href="#" class="btn btn-sm btn-white btn-info">
																See all members &nbsp;
																<i class="ace-icon fa fa-arrow-right"></i>
															</a>
														</div>

														<div class="hr hr-double hr8"></div>
													</div><!-- /.#member-tab -->

													<div id="comment-tab" class="tab-pane">
														<div class="comments">
															<div class="itemdiv commentdiv">
																<div class="user">
																	<img alt="Bob Doe's Avatar"
																		src="assets/images/avatars/avatar.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Bob Doe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="green">6 min</span>
																	</div>

																	<div class="text">
																		<i class="ace-icon fa fa-quote-left"></i>
																		Lorem ipsum dolor sit amet, consectetur
																		adipiscing elit. Quisque commodo massa sed ipsum
																		porttitor facilisis &hellip;
																	</div>
																</div>

																<div class="tools">
																	<div class="inline position-relative">
																		<button
																			class="btn btn-minier bigger btn-yellow dropdown-toggle"
																			data-toggle="dropdown">
																			<i
																				class="ace-icon fa fa-angle-down icon-only bigger-120"></i>
																		</button>

																		<ul
																			class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
																			<li>
																				<a href="#" class="tooltip-success"
																					data-rel="tooltip" title="Approve">
																					<span class="green">
																						<i
																							class="ace-icon fa fa-check bigger-110"></i>
																					</span>
																				</a>
																			</li>

																			<li>
																				<a href="#" class="tooltip-warning"
																					data-rel="tooltip" title="Reject">
																					<span class="orange">
																						<i
																							class="ace-icon fa fa-times bigger-110"></i>
																					</span>
																				</a>
																			</li>

																			<li>
																				<a href="#" class="tooltip-error"
																					data-rel="tooltip" title="Delete">
																					<span class="red">
																						<i
																							class="ace-icon fa fa-trash-o bigger-110"></i>
																					</span>
																				</a>
																			</li>
																		</ul>
																	</div>
																</div>
															</div>

															<div class="itemdiv commentdiv">
																<div class="user">
																	<img alt="Jennifer's Avatar"
																		src="assets/images/avatars/avatar1.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Jennifer</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="blue">15 min</span>
																	</div>

																	<div class="text">
																		<i class="ace-icon fa fa-quote-left"></i>
																		Lorem ipsum dolor sit amet, consectetur
																		adipiscing elit. Quisque commodo massa sed ipsum
																		porttitor facilisis &hellip;
																	</div>
																</div>

																<div class="tools">
																	<div class="action-buttons bigger-125">
																		<a href="#">
																			<i class="ace-icon fa fa-pencil blue"></i>
																		</a>

																		<a href="#">
																			<i class="ace-icon fa fa-trash-o red"></i>
																		</a>
																	</div>
																</div>
															</div>

															<div class="itemdiv commentdiv">
																<div class="user">
																	<img alt="Joe's Avatar"
																		src="assets/images/avatars/avatar2.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Joe</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="orange">22 min</span>
																	</div>

																	<div class="text">
																		<i class="ace-icon fa fa-quote-left"></i>
																		Lorem ipsum dolor sit amet, consectetur
																		adipiscing elit. Quisque commodo massa sed ipsum
																		porttitor facilisis &hellip;
																	</div>
																</div>

																<div class="tools">
																	<div class="action-buttons bigger-125">
																		<a href="#">
																			<i class="ace-icon fa fa-pencil blue"></i>
																		</a>

																		<a href="#">
																			<i class="ace-icon fa fa-trash-o red"></i>
																		</a>
																	</div>
																</div>
															</div>

															<div class="itemdiv commentdiv">
																<div class="user">
																	<img alt="Rita's Avatar"
																		src="assets/images/avatars/avatar3.png" />
																</div>

																<div class="body">
																	<div class="name">
																		<a href="#">Rita</a>
																	</div>

																	<div class="time">
																		<i class="ace-icon fa fa-clock-o"></i>
																		<span class="red">50 min</span>
																	</div>

																	<div class="text">
																		<i class="ace-icon fa fa-quote-left"></i>
																		Lorem ipsum dolor sit amet, consectetur
																		adipiscing elit. Quisque commodo massa sed ipsum
																		porttitor facilisis &hellip;
																	</div>
																</div>

																<div class="tools">
																	<div class="action-buttons bigger-125">
																		<a href="#">
																			<i class="ace-icon fa fa-pencil blue"></i>
																		</a>

																		<a href="#">
																			<i class="ace-icon fa fa-trash-o red"></i>
																		</a>
																	</div>
																</div>
															</div>
														</div>

														<div class="hr hr8"></div>

														<div class="center">
															<i class="ace-icon fa fa-comments-o fa-2x green middle"></i>

															&nbsp;
															<a href="#" class="btn btn-sm btn-white btn-info">
																See all comments &nbsp;
																<i class="ace-icon fa fa-arrow-right"></i>
															</a>
														</div>

														<div class="hr hr-double hr8"></div>
													</div>
												</div>
											</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
									</div><!-- /.widget-box -->
								</div><!-- /.col -->

								<div class="col-sm-6">
									<div class="widget-box">
										<div class="widget-header">
											<h4 class="widget-title lighter smaller">
												<i class="ace-icon fa fa-comment blue"></i>
												Conversation
											</h4>
										</div>

										<div class="widget-body">
											<div class="widget-main no-padding">
												<div class="dialogs">
													<div class="itemdiv dialogdiv">
														<div class="user">
															<img alt="Alexa's Avatar"
																src="assets/images/avatars/avatar1.png" />
														</div>

														<div class="body">
															<div class="time">
																<i class="ace-icon fa fa-clock-o"></i>
																<span class="green">4 sec</span>
															</div>

															<div class="name">
																<a href="#">Alexa</a>
															</div>
															<div class="text">Lorem ipsum dolor sit amet, consectetur
																adipiscing elit. Quisque commodo massa sed ipsum
																porttitor facilisis.</div>

															<div class="tools">
																<a href="#" class="btn btn-minier btn-info">
																	<i class="icon-only ace-icon fa fa-share"></i>
																</a>
															</div>
														</div>
													</div>

													<div class="itemdiv dialogdiv">
														<div class="user">
															<img alt="John's Avatar"
																src="assets/images/avatars/avatar.png" />
														</div>

														<div class="body">
															<div class="time">
																<i class="ace-icon fa fa-clock-o"></i>
																<span class="blue">38 sec</span>
															</div>

															<div class="name">
																<a href="#">John</a>
															</div>
															<div class="text">Raw denim you probably haven&#39;t heard
																of them jean shorts Austin.</div>

															<div class="tools">
																<a href="#" class="btn btn-minier btn-info">
																	<i class="icon-only ace-icon fa fa-share"></i>
																</a>
															</div>
														</div>
													</div>

													<div class="itemdiv dialogdiv">
														<div class="user">
															<img alt="Bob's Avatar"
																src="assets/images/avatars/user.jpg" />
														</div>

														<div class="body">
															<div class="time">
																<i class="ace-icon fa fa-clock-o"></i>
																<span class="orange">2 min</span>
															</div>

															<div class="name">
																<a href="#">Bob</a>
																<span
																	class="label label-info arrowed arrowed-in-right">admin</span>
															</div>
															<div class="text">Lorem ipsum dolor sit amet, consectetur
																adipiscing elit. Quisque commodo massa sed ipsum
																porttitor facilisis.</div>

															<div class="tools">
																<a href="#" class="btn btn-minier btn-info">
																	<i class="icon-only ace-icon fa fa-share"></i>
																</a>
															</div>
														</div>
													</div>

													<div class="itemdiv dialogdiv">
														<div class="user">
															<img alt="Jim's Avatar"
																src="assets/images/avatars/avatar4.png" />
														</div>

														<div class="body">
															<div class="time">
																<i class="ace-icon fa fa-clock-o"></i>
																<span class="grey">3 min</span>
															</div>

															<div class="name">
																<a href="#">Jim</a>
															</div>
															<div class="text">Raw denim you probably haven&#39;t heard
																of them jean shorts Austin.</div>

															<div class="tools">
																<a href="#" class="btn btn-minier btn-info">
																	<i class="icon-only ace-icon fa fa-share"></i>
																</a>
															</div>
														</div>
													</div>

													<div class="itemdiv dialogdiv">
														<div class="user">
															<img alt="Alexa's Avatar"
																src="assets/images/avatars/avatar1.png" />
														</div>

														<div class="body">
															<div class="time">
																<i class="ace-icon fa fa-clock-o"></i>
																<span class="green">4 min</span>
															</div>

															<div class="name">
																<a href="#">Alexa</a>
															</div>
															<div class="text">Lorem ipsum dolor sit amet, consectetur
																adipiscing elit.</div>

															<div class="tools">
																<a href="#" class="btn btn-minier btn-info">
																	<i class="icon-only ace-icon fa fa-share"></i>
																</a>
															</div>
														</div>
													</div>
												</div>

												<form>
													<div class="form-actions">
														<div class="input-group">
															<input placeholder="Type your message here ..." type="text"
																class="form-control" name="message" />
															<span class="input-group-btn">
																<button class="btn btn-sm btn-info no-radius"
																	type="button">
																	<i class="ace-icon fa fa-share"></i>
																	Send
																</button>
															</span>
														</div>
													</div>
												</form>
											</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
									</div><!-- /.widget-box -->
								</div><!-- /.col -->
							</div><!-- /.row -->

							<!-- PAGE CONTENT ENDS -->
						</div><!-- /.col -->
					</div><!-- /.row -->
				</div><!-- /.page-content -->
			</div>
		</div><!-- /.main-content -->

		<div class="footer">
			<div class="footer-inner">
				<div class="footer-content">
					<span class="bigger-120">
						<span class="blue bolder">Ace</span>
						Application &copy; 2013-2014
					</span>

					&nbsp; &nbsp;
					<span class="action-buttons">
						<a href="#">
							<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
						</a>

						<a href="#">
							<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
						</a>
					</span>
				</div>
			</div>
		</div>

		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>
	</div><!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script src="assets/js/jquery-2.1.4.min.js"></script>

	<!-- <![endif]-->

	<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
	</script>
	<script src="assets/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->

	<!--[if lte IE 8]>
		  <script src="assets/js/excanvas.min.js"></script>
		<![endif]-->
	<script src="assets/js/jquery-ui.custom.min.js"></script>
	<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="assets/js/jquery.easypiechart.min.js"></script>
	<script src="assets/js/jquery.sparkline.index.min.js"></script>
	<script src="assets/js/jquery.flot.min.js"></script>
	<script src="assets/js/jquery.flot.pie.min.js"></script>
	<script src="assets/js/jquery.flot.resize.min.js"></script>

	<!-- ace scripts -->
	<script src="assets/js/ace-elements.min.js"></script>
	<script src="assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function ($) {
			$('.easy-pie-chart.percentage').each(function () {
				var $box = $(this).closest('.infobox');
				var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
				var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
				var size = parseInt($(this).data('size')) || 50;
				$(this).easyPieChart({
					barColor: barColor,
					trackColor: trackColor,
					scaleColor: false,
					lineCap: 'butt',
					lineWidth: parseInt(size / 10),
					animate: ace.vars['old_ie'] ? false : 1000,
					size: size
				});
			})

			$('.sparkline').each(function () {
				var $box = $(this).closest('.infobox');
				var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
				$(this).sparkline('html',
					{
						tagValuesAttribute: 'data-values',
						type: 'bar',
						barColor: barColor,
						chartRangeMin: $(this).data('min') || 0
					});
			});


			//flot chart resize plugin, somehow manipulates default browser resize event to optimize it!
			//but sometimes it brings up errors with normal resize event handlers
			$.resize.throttleWindow = false;

			var placeholder = $('#piechart-placeholder').css({ 'width': '90%', 'min-height': '150px' });
			var data = [
				{ label: "social networks", data: 38.7, color: "#68BC31" },
				{ label: "search engines", data: 24.5, color: "#2091CF" },
				{ label: "ad campaigns", data: 8.2, color: "#AF4E96" },
				{ label: "direct traffic", data: 18.6, color: "#DA5430" },
				{ label: "other", data: 10, color: "#FEE074" }
			]
			function drawPieChart(placeholder, data, position) {
				$.plot(placeholder, data, {
					series: {
						pie: {
							show: true,
							tilt: 0.8,
							highlight: {
								opacity: 0.25
							},
							stroke: {
								color: '#fff',
								width: 2
							},
							startAngle: 2
						}
					},
					legend: {
						show: true,
						position: position || "ne",
						labelBoxBorderColor: null,
						margin: [-30, 15]
					}
					,
					grid: {
						hoverable: true,
						clickable: true
					}
				})
			}
			drawPieChart(placeholder, data);

			/**
			we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
			so that's not needed actually.
			*/
			placeholder.data('chart', data);
			placeholder.data('draw', drawPieChart);


			//pie chart tooltip example
			var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
			var previousPoint = null;

			placeholder.on('plothover', function (event, pos, item) {
				if (item) {
					if (previousPoint != item.seriesIndex) {
						previousPoint = item.seriesIndex;
						var tip = item.series['label'] + " : " + item.series['percent'] + '%';
						$tooltip.show().children(0).text(tip);
					}
					$tooltip.css({ top: pos.pageY + 10, left: pos.pageX + 10 });
				} else {
					$tooltip.hide();
					previousPoint = null;
				}

			});

			/////////////////////////////////////
			$(document).one('ajaxloadstart.page', function (e) {
				$tooltip.remove();
			});




			var d1 = [];
			for (var i = 0; i < Math.PI * 2; i += 0.5) {
				d1.push([i, Math.sin(i)]);
			}

			var d2 = [];
			for (var i = 0; i < Math.PI * 2; i += 0.5) {
				d2.push([i, Math.cos(i)]);
			}

			var d3 = [];
			for (var i = 0; i < Math.PI * 2; i += 0.2) {
				d3.push([i, Math.tan(i)]);
			}


			var sales_charts = $('#sales-charts').css({ 'width': '100%', 'height': '220px' });
			$.plot("#sales-charts", [
				{ label: "Domains", data: d1 },
				{ label: "Hosting", data: d2 },
				{ label: "Services", data: d3 }
			], {
				hoverable: true,
				shadowSize: 0,
				series: {
					lines: { show: true },
					points: { show: true }
				},
				xaxis: {
					tickLength: 0
				},
				yaxis: {
					ticks: 10,
					min: -2,
					max: 2,
					tickDecimals: 3
				},
				grid: {
					backgroundColor: { colors: ["#fff", "#fff"] },
					borderWidth: 1,
					borderColor: '#555'
				}
			});


			$('#recent-box [data-rel="tooltip"]').tooltip({ placement: tooltip_placement });
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('.tab-content')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				//var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
				return 'left';
			}


			$('.dialogs,.comments').ace_scroll({
				size: 300
			});


			//Android's default browser somehow is confused when tapping on label which will lead to dragging the task
			//so disable dragging when clicking on label
			var agent = navigator.userAgent.toLowerCase();
			if (ace.vars['touch'] && ace.vars['android']) {
				$('#tasks').on('touchstart', function (e) {
					var li = $(e.target).closest('#tasks li');
					if (li.length == 0) return;
					var label = li.find('label.inline').get(0);
					if (label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation();
				});
			}

			$('#tasks').sortable({
				opacity: 0.8,
				revert: true,
				forceHelperSize: true,
				placeholder: 'draggable-placeholder',
				forcePlaceholderSize: true,
				tolerance: 'pointer',
				stop: function (event, ui) {
					//just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
					$(ui.item).css('z-index', 'auto');
				}
			}
			);
			$('#tasks').disableSelection();
			$('#tasks input:checkbox').removeAttr('checked').on('click', function () {
				if (this.checked) $(this).closest('li').addClass('selected');
				else $(this).closest('li').removeClass('selected');
			});


			//show the dropdowns on top or bottom depending on window height and menu position
			$('#task-tab .dropdown-hover').on('mouseenter', function (e) {
				var offset = $(this).offset();

				var $w = $(window)
				if (offset.top > $w.scrollTop() + $w.innerHeight() - 100)
					$(this).addClass('dropup');
				else $(this).removeClass('dropup');
			});

		})
	</script>
</body>

</html>